<template>
  <div class="box">
    <div class="inside">
      <h4>全国用户总量统计</h4>
      <div class="box-content">
        <div class="content-figure"></div>
        <div class="content-conclusion">
          <div>
            <h4>320,11</h4>
            <span><i class="icon-dot" style="color: #ed3f35"></i>点位总数</span>
          </div>
          <div>
            <h4>418</h4>
            <span><i class="icon-dot" style="color: #eacf19"></i>本月新增</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from '@/util/echartsModule'
import adaptive from '@/util/adaptive.js'
export default {
  name: 'EchratHistogram',

  data () {
    return {}
  },

  mounted () {
    this.initMap()
  },

  methods: {
    initMap () {
      const chartDom = document.querySelector('.content-figure')
      const myChart = echarts.init(chartDom)
      const item = {
        value: '1200',
        // 修改此柱子颜色
        itemStyle: { color: '#254065' },
        // 鼠标放柱子上不显示高亮
        emphasis: {
          itemStyle: {
            color: '#254065'
          }
        },
        // 不显示数据框
        tooltip: { extraCssText: 'opacity:0' }
      }
      const option = {
        tooltip: {
          // 点击模式
          trigger: 'item'
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '3%',
          top: '4%',
          containLabel: true,
          // 显示边框
          show: true,
          // 边框颜色
          borderColor: '#006f82'
        },
        // x轴
        xAxis: [
          {
            type: 'category',
            data: [
              '上海',
              '广州',
              '北京',
              '合肥',
              '杭州',
              '',
              '......',
              '',
              '厦门',
              '郑州',
              '济南',
              '成都'
            ],
            // 刻度
            axisTick: {
              alignWithLabel: true,
              // 把x轴的刻度去掉
              show: false
            },
            // x轴刻度标签设置
            axisLabel: {
              // 底部文字颜色
              color: '#4c9bfd'
            },
            // x轴相关设置
            axisLine: {
              lineStyle: {
                // x轴颜色
                color: '#006f82'
              }
            }
          }
        ],
        // y轴
        yAxis: [
          {
            type: 'value',
            // 刻度
            axisTick: {
              alignWithLabel: true,
              // 把y轴的刻度去掉
              show: false
            },
            // y轴刻度标签设置
            axisLabel: {
              // 文字颜色
              color: '#4c9bfd'
            },
            // y轴相关设置
            axisLine: {
              lineStyle: {
                // y轴颜色
                color: '#006f82'
              }
            },
            // y轴分割线设置
            splitLine: {
              lineStyle: {
                // 分割线颜色
                color: '#006f82'
              }
            }
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            // 柱子大小
            // barWidth: '30%',
            barCategoryGap: '50%',
            data: [
              2100,
              1900,
              1700,
              1560,
              1400,
              item,
              item,
              item,
              900,
              750,
              600,
              480,
              240
            ],
            // 渐变色
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#00fffb' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#0061ce' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        ]
      }

      option && myChart.setOption(option)
      adaptive(myChart)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 210px;
  .box-content {
    width: 100%;
    height: 210px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .content-figure {
      width: 495px;
      height: 100%;
    }
    .content-conclusion {
      display: flex;
      flex-direction: column;
      width: 150px;
      background-image: url(@/assets/rect.png);
      background-size: cover;
      align-items: center;
      justify-content: center;
      & div:nth-child(1) {
        margin-bottom: 30px;
      }
      h4 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
        color: #1575fd;
      }
    }
  }
}
</style>
